<template>
  <footer class="p-[20px_15px_65px] text-grey md:px-10 xl:p-[20px_50px]">
    <p class="my-[3px] text-sm">
      &copy; {{ new Date().getFullYear() }} Jason Ujma-Alvis. All rights
      reserved.
      <a
        class="text-grey underline"
        target="_blank"
        href="https://jason.codes/cookie-policy"
        rel="noopener"
        >Cookie Policy</a
      >.
    </p>
    <p class="my-[3px] text-sm">
      Designed and built by me, data provided by
      <a
        class="text-grey underline"
        target="_blank"
        href="https://www.themoviedb.org/"
        rel="noopener"
        >TMDb</a
      >.
    </p>

    <ul class="flex m-[20px_0_0_-5px]">
      <li>
        <a
          class="flex items-center justify-center size-[44px] group text-grey underline"
          href="https://twitter.com/jasonujmaalvis"
          target="_blank"
          aria-label="Link to Twitter account"
          rel="noopener"
        >
          <svg
            class="transition-all duration-300 ease-in-out group-hover:fill-white group-focus:fill-white"
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="#585858"
          >
            <path
              d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
            />
          </svg>
        </a>
      </li>
      <li>
        <a
          class="flex items-center justify-center size-[44px] group text-grey underline"
          href="https://github.com/jasonujmaalvis"
          target="_blank"
          aria-label="Link to GitHub account"
          rel="noopener"
        >
          <svg
            class="transition-all duration-300 ease-in-out group-hover:fill-white group-focus:fill-white"
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="#585858"
          >
            <path
              d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
            />
          </svg>
        </a>
      </li>
      <li>
        <a
          class="flex items-center justify-center size-[44px] group text-grey underline"
          href="https://www.linkedin.com/in/jason-ujma-alvis"
          target="_blank"
          aria-label="Link to LinkedIn account"
          rel="noopener"
        >
          <svg
            class="transition-all duration-300 ease-in-out group-hover:fill-white group-focus:fill-white"
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="#585858"
          >
            <path
              d="M19 0H5a5 5 0 0 0-5 5v14a5 5 0 0 0 5 5h14a5 5 0 0 0 5-5V5a5 5 0 0 0-5-5zM8 19H5V8h3v11zM6.5 6.732c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zM20 19h-3v-5.604c0-3.368-4-3.113-4 0V19h-3V8h3v1.765c1.396-2.586 7-2.777 7 2.476V19z"
            />
          </svg>
        </a>
      </li>
      <li>
        <a
          class="flex items-center justify-center size-[44px] group text-grey underline"
          href="mailto:hello@jason.codes"
          aria-label="Link to Email"
          rel="noopener"
        >
          <svg
            class="transition-all duration-300 ease-in-out group-hover:fill-white group-focus:fill-white"
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="#585858"
          >
            <path
              d="M0 3v18h24V3H0zm21.518 2L12 12.713 2.482 5h19.036zM2 19V7.183l10 8.104 10-8.104V19H2z"
            />
          </svg>
        </a>
      </li>
    </ul>
  </footer>
</template>
